<template>
  <section class="section">
    <h2 class="section-title">业务范围</h2>
    <div class="services-grid">
      <article class="service-card">
        <img src="https://images.pexels.com/photos/34234300/pexels-photo-34234300.png?auto=compress&cs=tinysrgb&h=200" alt="数字化转型咨询" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>数字化转型咨询</h3>
          <p>提供全面的数字化战略规划、业务流程优化和组织变革管理服务，帮助企业制定清晰的数字化发展路线图。</p>
        </div>
      </article>
      <article class="service-card">
        <img src="https://images.pexels.com/photos/34221176/pexels-photo-34221176.jpeg?auto=compress&cs=tinysrgb&h=200" alt="定制化软件开发" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>定制化软件开发</h3>
          <p>根据客户需求量身打造高效、稳定的企业级应用系统，涵盖Web、移动端和桌面端全平台解决方案。</p>
        </div>
      </article>
      <article class="service-card">
        <img src="https://images.pexels.com/photos/34211773/pexels-photo-34211773.jpeg?auto=compress&cs=tinysrgb&h=200" alt="云计算与架构设计" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>云计算与架构设计</h3>
          <p>提供云原生架构设计、混合云部署方案和微服务架构实施，助力企业构建弹性可扩展的技术基础设施。</p>
        </div>
      </article>
      <article class="service-card">
        <img src="https://images.pexels.com/photos/34207042/pexels-photo-34207042.png?auto=compress&cs=tinysrgb&h=200" alt="数据智能分析" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>数据智能分析</h3>
          <p>构建完整的大数据分析平台，实现数据采集、处理、可视化和智能决策支持，挖掘数据价值创造商业机会。</p>
        </div>
      </article>
      <article class="service-card">
        <img src="https://images.pexels.com/photos/34207043/pexels-photo-34207043.png?auto=compress&cs=tinysrgb&h=200" alt="信息安全防护" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>信息安全防护</h3>
          <p>提供全面的信息安全评估、风险管控和应急响应服务，保障企业核心数据资产的安全与合规。</p>
        </div>
      </article>
      <article class="service-card">
        <img src="https://images.pexels.com/photos/34206105/pexels-photo-34206105.png?auto=compress&cs=tinysrgb&h=200" alt="技术培训与赋能" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>技术培训与赋能</h3>
          <p>提供专业技能培训课程和实战工作坊，提升团队技术能力，培养企业内部技术人才梯队。</p>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup>
// 业务范围页面
const handleImageError = (event) => {
  event.target.src = 'https://images.pexels.com/photos/3184454/pexels-photo-3184454.jpeg?auto=compress&cs=tinysrgb&h=200'
}
</script>

<style scoped>
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  margin-bottom: 1rem;
  color: #2c3e50;
}

.card-content p {
  color: #666;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
</style>